CKEDITOR.plugins.add('simulateFormControls',{
  
  init: function(editor){
    var pluginName = 'simulateFormControls';
    
    // Simulate the radio button
    editor.ui.addButton('simulatedRadioButton',
      {
        label: 'Radio Button',
        command: 'addSimulatedRadioButton',
        icon: CKEDITOR.plugins.getPath(pluginName) + 'images/radiobutton-up.png'
      });
    
    editor.addCommand( 'addSimulatedRadioButton', new CKEDITOR.dialogCommand('simulatedRadioButton'));
    CKEDITOR.dialog.add('simulatedRadioButton', this.path + 'dialogs/simulatedRadioButton.js');
    
    /*  
    editor.addCommand( 'addSimulatedRadioButton',
      {
          exec : function( editor )
          {
              var down = CKEDITOR.plugins.getPath('simulateFormControls') + 'images/radiobutton-down.png';
              var up = CKEDITOR.plugins.getPath('simulateFormControls') + 'images/radiobutton-up.png';
              editor.insertHtml('<img class="testButton" style="cursor: pointer;" src="' + down + '" alt="radioButton" width="16" height="16" onClick="var elem = document.getElementsByTagName(\'img\'); for(i = 0; i < elem.length; i++){if(elem[i].className == \'testButton\'){elem[i].src = \'' + down + '\'}} this.src = \'' + up + '\'">');
          }
      });   */
    
    // Simulate the check button 
    editor.ui.addButton('simulatedCheckButton',
      {
        label: 'Check Button',
        command: 'addSimulatedCheckButton',
        icon: CKEDITOR.plugins.getPath(pluginName) + 'images/checkbutton-checked.png'
      });
    
    editor.addCommand( 'addSimulatedCheckButton', new CKEDITOR.dialogCommand('simulatedCheckButton'));
    CKEDITOR.dialog.add('simulatedCheckButton', this.path + 'dialogs/simulatedCheckButton.js');
    /*
    editor.addCommand( 'addSimulatedCheckButton',
      {
          exec : function( editor )
          {
              var down = CKEDITOR.plugins.getPath(pluginName) + 'images/checkButton-unchecked.png';
              var up = CKEDITOR.plugins.getPath(pluginName) + 'images/checkButton-checked.png';
              editor.insertHtml('<img src="' + down + '" style="cursor: pointer;" alt="radioButton" width="16" height="16" onClick="if(this.src == \'' + down + '\'){this.src = \'' + up + '\';} else {this.src = \'' + down + '\';}">');
          }
      });*/
    
    // Simulate Input field 
    editor.ui.addButton('simulatedInputField',
      {
        label: 'Input Field',
        command: 'addSimulatedInputField',
        icon: CKEDITOR.plugins.getPath(pluginName) + 'images/inputfield.png'
      });
    
    editor.addCommand( 'addSimulatedInputField', new CKEDITOR.dialogCommand('simulatedInputField'));
    CKEDITOR.dialog.add('simulatedInputField', this.path + 'dialogs/simulatedInputField.js');
    
    /*  
    editor.addCommand( 'addSimulatedInputField',
      {
          exec : function( editor )
          {
              editor.insertHtml('<div style="width: 200px; height: 14pt; overflow: hidden; border: 1px solid black;"><input type="text" style="border: 0px; width: 200px;" /></div>');
          }
      });*/
    
    // Simulate text field
    editor.ui.addButton('simulatedTextField',
      {
        label: 'Text Field',
        command: 'addSimulatedTextField',
        icon: CKEDITOR.plugins.getPath(pluginName) + 'images/textfield.png'
      });
    
    editor.addCommand( 'addSimulatedTextField', new CKEDITOR.dialogCommand('simulatedTextField'));
    CKEDITOR.dialog.add('simulatedTextField', this.path + 'dialogs/simulatedTextField.js');
    /*  
    editor.addCommand( 'addSimulatedTextField',
      {
          exec : function( editor )
          {
              editor.insertHtml('<div style="width: 400px; height: 200px; margin: 0px; padding: 0px; border: 1px solid black; overflow: hidden; cursor: pointer;"><textarea style="width: 400px; height: 200px;"></textarea></div>');
              
          }
      });  */
    
    // Simulate drop down list 
    editor.ui.addButton('simulatedDropDownList',
      {
        label: 'Drop Down List',
        command: 'addSimulatedDropDownList',
        icon: CKEDITOR.plugins.getPath(pluginName) + 'images/dropdownlist.png'
      });
    
    editor.addCommand( 'addSimulatedDropDownList', new CKEDITOR.dialogCommand('simulatedDropDownList'));
    CKEDITOR.dialog.add('simulatedDropDownList', this.path + 'dialogs/simulatedDropDownList.js');
    /*  
    editor.addCommand( 'addSimulatedDropDownList',
      {
          exec : function( editor )
          {
              editor.insertHtml('<div style="width: 200px; height: 14pt; border: 1px solid black; cursor: pointer;" '+
              'onClick="if(this.lastChild.style.display == \'none\'){for(i = 0; i < this.childNodes.length; i++){this.childNodes[i].style.display = \'block\'} openDivs = true;} else { this.lastChild.style.display = \'none\';}">' + 
              //'<div style="display: block;" onClick="for(i = 0; i < (this.parentNode.childNodes.length - 1); i++){this.parentNode.childNodes[i].style.display = \'none\'} this.style.display = \'block\';">test</div>' + 
              //'<div style="display: none;" onClick="for(i = 0; i < (this.parentNode.childNodes.length - 1); i++){this.parentNode.childNodes[i].style.display = \'none\'} this.style.display = \'block\';">Ertm</div>' +
              '<div style="display: none; height: 0px;"></div></div>');
          }
      });*/
  }
});